<template>
    <div class="not-found">
      <el-row class="error-container" justify="center" align="middle">
        <el-col :span="24" class="text-center">
          <img src="../assets/images/logo-banner.png" alt="404" class="error-image"/>
          <h1 class="error-title">404</h1>
          <h2 class="error-subtitle">抱歉，您访问的页面不存在</h2>
          <el-button type="primary" @click="goHome" class="back-btn">
            返回首页
          </el-button>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script setup>
  import { useRouter } from 'vue-router'
  
  const router = useRouter()
  const goHome = () => {
    router.push('/')
  }
  </script>
  
  <style scoped>
  .not-found {
    height: 100vh;
    display: flex;
    align-items: center;
    background-color: #f5f7fa;
  }
  
  .error-container {
    width: 100%;
  }
  
  .text-center {
    text-align: center;
  }
  
  .error-image {
    width: 300px;
    margin-bottom: 20px;
  }
  
  .error-title {
    font-size: 72px;
    color: #409eff;
    margin: 0;
    line-height: 1.2;
  }
  
  .error-subtitle {
    font-size: 24px;
    color: #606266;
    margin: 20px 0;
    font-weight: normal;
  }
  
  .back-btn {
    padding: 12px 30px;
    font-size: 16px;
  }
  </style>